<template>
	<view class="qiun-columns">
		
		<view class="top" :style="'background-color: '+backgroundColor+';background-size: 100% 100%;'">
			<view class="nav d-flex flex-nowrap a-center pt-3 bz px-2" :style="'background-color: '+backgroundColor+';'">
				<image src="../../static/me@2x.png" class="icon" mode="aspectFill"></image>
				<text class="name">尊敬的{{name}}  {{level}}</text>
				<image src="../../static/gai@2x.png" class="icon" mode="aspectFill"></image>
			</view>
			<view style="height: 132px;"></view>
			<view class="d-flex j-center">
				<view class="qiun-charts">
					<!--#ifdef MP-ALIPAY -->
					<canvas canvas-id="canvasArea" id="canvasArea" class="chartsa" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
					<!--#endif-->
					<!--#ifndef MP-ALIPAY -->
					<canvas canvas-id="canvasArea" id="canvasArea" class="chartsa" ></canvas>
					<!--#endif-->
					<view class="d-flex flex-wrap j-center" v-if="isLogin">
						<view class="top_wrap">

							<view class="d-flex flex-wrap j-center py-1 text-1 a-center">
								<view style="display: flex;" v-if="levelUpdateTime!=''"><view class="top_des">{{levelUpdateTime.split(" ")[0]}}前,消费</view></view>
								<view class="top_des" v-if="levelUpdateTime==''">消费</view>
								<view style="display: flex;"><view class="top_num">{{num}}</view><view class="top_des">升级为</view></view>
								<view style="display: flex;" v-if="saveLevel>0"><view class="top_des">「{{next.level}}」消费</view><view class="top_num">{{saveLevel}}</view></view>
								<view class="top_des" v-if="saveLevel>0">保级「{{level}}」</view>
								
								<view style="display: flex;" v-if="saveLevel<=0"><view class="top_des">「{{next.level}}」</view></view>
								<view class="top_des" v-if="saveLevel<=0">已保级「{{level}}」</view>
							</view>
							
							<view class="d-flex flex-nowrap j-center a-center text-1" style="align-items: flex-end;">
								<view class="top_des">当前积分</view>
								<view class="top_num">{{mypoint}}</view>
								<view class="top_des">积分</view>
							</view>
						</view>
					</view>
					<view v-else>
						<button @click="goLogin" style="width: 110px;background-color: #007BEF;color:#F1F1F1;font-size: 13px;;">点击登录</button>
					</view>
				</view>
			</view>
			<view style="height: 80rpx;"></view>
			<!-- bar -->
			<view class="bz p-2">
				<view class="bz p-3 d-flex flex-wrap  bx b-radius1">
					<view class="list_nav my-2" v-for="(item,index) in list" :key="index" @tap="go(item.equityName)">
						<view class="d-flex j-center">
							<image :src="item.equityIcon" class="nav_icon" mode="widthFix"></image>
						</view>
						<view class="list_name py-1 text-center text-1">{{item.equityName}}</view>
						<view class="list_des text-center text-1">{{item.equityDeclare}}</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		
		<!-- 我的订单 -->
		<view>
			<view class="order_top bz p-2">
				我的订单
			</view>
			<view class="bz p-3 bg-white d-flex flex-nowrap j-sb">
				<view class="flex-1 j-center" v-for="(item,index) in order" :key="index" @tap="goTo(item.url)">
					<image :src="item.icon" class="order_icon" mode="widthFix"></image>
					<view class="order_name text-center pt-2">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 常用工具 -->
		<view>
			<view class="order_top bz p-2">
				常用工具
			</view>
			<view class="cu-list menu" >
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-black">智能客服</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-black">加盟合作</text>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content">
						<text class="text-black">设置</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<button @tap="loginOut">退出登录</button>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	
	var canvaArea=null;
   
	export default {
		data() {
			return {
				backgroundColor:'#39213f',
				saveLevel:0,
				levelUpdateTime:'',
				isLogin:false,
				cWidth:'',
				cHeight:'',
				arcbarWidth:0,
				pixelRatio:1,
				textarea:'',
				list:[
					{
						icon:'../../static/icon/9.png',
						name:'更多权益',
						des:''
					}
				],
				order:[
					{
						icon:'../../static/yiyuyue@2x.png',
						name:'预约记录',
						url:'../order/order'
					},
					{
						icon:'../../static/yiwancheng@2x.png',
						name:'消费订单',
						url:'../order_list/order_list'
					}
				],
				background:'/static/bg1.png',
				name:'',
				level:'',
				startPoint:0,
				customer:[],
				next:{
					level:''
				},
				mypoint:0,
				num:0
			}
		},
		onReady() {

			
			
			var _self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.name=uni.getStorageSync('user').name
			this.level=uni.getStorageSync('level')
			
			this.cWidth=uni.upx2px(450);
			this.cHeight=uni.upx2px(340);
			this.arcbarWidth=uni.upx2px(46);
			this.getServerData();
			
			if(!uni.getStorageSync('user')){
				uni.showToast({
					title: '请先登录',
					icon: "none"
				});
				return;
			}
			this.isLogin = true;
			
		},
		onShow() {;
		this.backgroundColor = '#39213f';
		if(!uni.getStorageSync('user')){
			uni.showToast({
				title: '请先登录',
				icon: "none"
			});
			return;
		}
		
		this.isLogin = true;
		var that = this;

		this.getUserInfo();
		},
		onLoad() {

			var that = this;
			// #ifdef  MP-WEIXIN
			let base64 = wx.getFileSystemManager().readFileSync(this.background, 'base64');
			that.background= 'data:image/jpg;base64,' + base64;
			// #endif
		},
		methods: {
			loginOut(){
				uni.clearStorageSync();
				
				this.isLogin=false;
				this.cWidth='';
				this.cHeight='';
				this.arcbarWidth=0;
				this.pixelRatio=1;
				this.textarea='';
				this.name='';
				this.level='';
				this.startPoint=0;
				this.customer=[];
				this.next={
					level:''
				};
				this.mypoint=0;
				this.num=0;
				this.list =[
					{
						icon:'../../static/icon/9.png',
						name:'更多权益',
						des:''
					}
				];
				
				uni.showToast({title:'退出成功', icon:"none"});
			},
			goLogin(){
				uni.navigateTo({
					 url: "/pages/login/login"
				})
			},
			getinfo(){
				var arr= {
					openId :uni.getStorageSync('user').openId,
							curr:1,
							pageSize:10,
							level:uni.getStorageSync('level')
						};
					arr=JSON.stringify(arr)
				this.$http({
						url: '/IWeiXinService.queryLevelEquityList',
						method: 'post',
						data: arr
					}).then((res) => {
						console.log(res)
						if(res.code==0){
							this.list=res.data;
							var arr={
									equityIcon:'../../static/icon/9.png',
									equityName:'更多权益',
									des:''
								};
							this.list=this.list.concat(arr)	
							this.total=res.count
						}else if(res.code=='100003'){
					uni.showToast({title:res.msg, icon:"none"});
					setTimeout(function(){
						uni.navigateTo({
						    url: "/pages/bind_phone/bind_phone"
						});
					},1000)
				}else if(res.code=='100004'){
					uni.showToast({title:res.msg, icon:"none"});
					this.isLogin = false;
				}
				
					}).catch((err) => {
						console.log(err)
					
					})
			},
			getUserInfo(){
				var arr= {
					openId :uni.getStorageSync('user').openId,
							curr:1,
							pageSize:10
						};
					arr=JSON.stringify(arr)
				this.$http({
						url: '/IWeiXinService.queryOwnerInfo',
						method: 'post',
						data: arr
					}).then((res) => {
						if(res.code==0){
							this.customer=res.data.customer;
							this.name = this.customer.weChatName;
							this.backgroundColor = this.customer.backGroundColor;
							this.saveLevel = this.customer.saveLevel;
							this.levelUpdateTime = this.customer.levelSaveTime==null?'':this.customer.levelSaveTime;
							this.level = this.customer.level;
							uni.setStorageSync('level',this.level);
							this.next=res.data.next;
							this.startPoint=res.data.next.startPoint;
							this.mypoint=res.data.customer.point
							this.num=parseInt(this.startPoint)-parseInt(this.mypoint);
									this.getinfo();
									this.changeData(parseInt(this.mypoint)/parseInt(this.startPoint));
						}else if(res.code=='100003'){
					uni.showToast({title:res.msg, icon:"none"});
					setTimeout(function(){
						uni.navigateTo({
						    url: "/pages/bind_phone/bind_phone"
						});
					},1000)
				}else if(res.code=='100004'){
					uni.showToast({title:res.msg, icon:"none"});
					this.isLogin = false;
				}
				
					}).catch((err) => {
						console.log(err)
					
					})
			},
			getServerData(){
				var num=parseInt(this.mypoint)/parseInt(this.startPoint);
				console.log('getServerData' + num);
				let Area={series:[{name:'分数',data:num}]};
				this.textarea = JSON.stringify(Area);
				this.showArea("canvasArea",Area);
			},
			showArea(canvasId,chartData){
				let _self = this;
				let border=this.arcbarWidth;
				let aWidth=this.cWidth/2-border;
				let aHeight=this.cHeight-border;
				let radius=(aWidth*aWidth+aHeight*aHeight)/aHeight/2;
				let centerPoint={
					x:this.cWidth/2*this.pixelRatio,
					y:(radius+border)*this.pixelRatio
				};
				canvaArea=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					colors:['#E6C17E'],
					legend:{show:false},
					background:'#34203B',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						arcbar:{
							type:'default',
							width: border*_self.pixelRatio,
							backgroundColor:'rgba(59,40,67,0.8)',
							startAngle:0.8999,
							endAngle:0.1003,
							radius:radius*_self.pixelRatio,
							gap:5*_self.pixelRatio,
							center:centerPoint
						}
					}
				});
				
			},
			changeData(num){
					canvaArea.updateData({
						series: [{name:'积分数',data:num}],
					});
			},
			go(e){
				if(e=='更多权益'){
					uni.navigateTo({
						url:"../more/more"
					})
				}
				
			},
			goTo(e){
				uni.navigateTo({
					url:e
				})
			},
			to(){
				uni.makePhoneCall({
				    phoneNumber: '18252009678' //仅为示例
				});
				
			}
		}
	}
</script>

<style>
	page{
		background:rgba(242,244,247,1);
		height: 100%;
	}
	.qiun-columns{
		width: 100vw;
		overflow-x: hidden;
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 450rpx;
		height: 340rpx;
		position: relative;
	}
	
	.chartsa {
		width: 750rpx;
		height: 340rpx;
	}
	.top{
		width: 100%;
		
		/* height: 1000rpx; */
		position: relative;
	}
	.nav{
		height: 122px;
		line-height: 124px;
		color: #fff;
		text-align: center;
		font-size:36rpx;
		font-family:PingFang;
		font-weight:500;
		color:rgba(255,255,255,1);
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: url(../../static/bg1.png);
		z-index: 8888888888;
		box-sizing: border-box;
		/* padding: 0 20rpx; */
	}
	.icon{
		width: 32rpx;
		height: 32rpx;
		display: block;
	}
	.name{
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(239,199,138,1);
		padding: 0 20rpx;
	}
	.top_btn{
		width:187rpx;
		height:56rpx;
	}
	.top_des{
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:300;
		color:rgba(239,199,138,1);
	}
	.top_num{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:600;
		color:rgba(239,199,138,1);
		margin: 0 8rpx;
	}
	.top_wrap{
		width: 255rpx;
		position: absolute;
		top: 150rpx;
	}
	.list_nav{
		width: 25%;
	}
	.nav_icon{
		width: 40rpx;
		height: 40rpx;
		display: block;
	}
	.list_name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(239,199,138,1);
		
	}
	.list_des{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:300;
		color:rgba(239,199,138,1);
	}
	.bx{
		background: rgba(255,255,255,.1);
	}
	.order_top{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		letter-spacing: 3rpx;
	}
	.order_icon{
		width: 46rpx;
		height: 50rpx;
		display: block;
		margin: 0 auto;
	}
	.order_name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.text-black{
		font-size:30rpx;
		font-family:PingFangSC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
</style>
